<template>
	<view class="content">
		<view class="tip">
			<view class="tip-title">
				反馈类型
			</view>
		</view>
		<view class="feed_type">
			<view class="feed_type_item" v-for="(item,index) in feedtypelist" @click="ChangeFeedType(index)">
				<view class="types" v-if="selectIndex===index">
					<text class="feedtype_item select_item">{{item.text}}</text>
				</view>
				<view class="types" v-else>
					<text class="feedtype_item unselect_item">{{item.text}}</text>
				</view>
			</view>
		</view>
		<view class="tip">
			<view class="tip-title">
				反馈内容
			</view>
		</view>
		<view class="feedtextare_panel">
			<textarea class = "feedarea_text" :placeholder='placeholder_text' placeholder-style="margin-left:30rpx;margin-top:20rpx"
							maxlength = 150 adjust-position=true @input="ChangeText_Area_value">
			</textarea>
			<view class="left_text_panel">
				{{left_text}}
			</view>
		</view>
		<view class="tip">
			<view class="tip-title">
				图片(选填)
			</view>
		</view>
		<view class="add_imagepanel">
			<image class="add_btn" src="https://jianxia.mazhoudao.com/h5/static/me/add.png" @click="AddPhotoImage_Fun"></image>
			<view class="image_list_panel" v-for="(item,index) in ImageLists">
					<image class="image_item" :src="item" ></image>
					<image class="jian_btn" src="https://jianxia.mazhoudao.com/h5/static/home/peizhuang/×.png" @click="JianPhotoImage_Fun(index)"></image>
			</view>
		</view>
		<view class="push_imagepanel">
			<button type="default" @click="Push_feed_Fun" class="push_btn">提交</button>
		</view>
		<view class="feed_record_panel">
			<view class="feed_text" @click="GoToRecord_Fun">
				反馈记录
			</view>
			<svg t="1641953366955" class="feed_record_btn" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2236"><path d="M857.70558 495.009024 397.943314 27.513634c-7.132444-7.251148-18.794042-7.350408-26.048259-0.216941-7.253194 7.132444-7.350408 18.795065-0.216941 26.048259l446.952518 454.470749L365.856525 960.591855c-7.192819 7.192819-7.192819 18.85544 0 26.048259 3.596921 3.596921 8.311293 5.39487 13.024641 5.39487s9.42772-1.798972 13.024641-5.39487L857.596086 520.949836C864.747973 513.797949 864.796068 502.219239 857.70558 495.009024z" p-id="2237"></path></svg>
<!-- 			<image class="feed_record_btn" src="https://jianxia.mazhoudao.com/h5/static/me/goto.png" @click="GoToRecord_Fun"></image> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectIndex: 0,
				ImageLists:[
					//"blob:http://localhost:8080/fe672c90-b0c5-4d8f-9fe6-7b12e01f1ee7"
				],
				left_text : "0/150",
				placeholder_text:"请留下你的宝贵意见~~",
				placeholder_input_text:"",
				feedtypelist: [{
					mode: 'heightFix',
					text: '异常反馈',
					textColor: "color: #00000;"
				}, {
					mode: 'heightFix',
					text: '功能建议',
					textColor: "color: #00000;"
				}, {
					mode: 'heightFix',
					text: '其他',
					textColor: "color: #00000;"
				}],
			}
		},
		methods: {
			ChangeText_Area_value(e)
			{
				var leftt = 150-e.detail.value.length;
				this.left_text = leftt +"/150";
			},
			ChangeFeedType(index)
			{
				this.selectIndex = index;
			},
			AddPhotoImage_Fun()
			{
				const app = this
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success(res) {
					  var tempFilePaths = res.tempFilePaths
					  if(app.ImageLists.length<3){
						app.ImageLists.push(tempFilePaths[0])
					  }
					  else
					  {  
						uni.showToast({
						    title:"最多上传3张图片" 
						})
					  }
					 
					}
				})
			
			},
			JianPhotoImage_Fun(index)
			{
				this.ImageLists.splice(index,1)
			},
			Push_feed_Fun()
			{
				for(var i=0;i<this.ImageLists.length;i++){
				 uni.uploadFile({
					url: url, 
					filePath: tempFilePaths[i],
					name: 'file',
					formData:{
					  'user': 'test'
					},
					success(res){
					  if(res.statusCode==200){
						res.data = JSON.parse(res.data);
						  if(res.data.code==0){
							console.log(res);
						  }
					  }
					},
					fail(res){
						showToast('图片上传失败');
					}
				 })
				}
				this.selectIndex;
				
			},
			GoToRecord_Fun()
			{
				uni.navigateTo({
					url: '/pages/index/peizhuang/index'
				})
			}
		}
	}
</script>

<style>
	.content
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.tip {
		margin-top: 00rpx;
		width: 100%;
		height: 30px;
		float: left;

	}

	.tip-title {
		margin-left: 30rpx;
		line-height: 30px;
		width: 100%;
		height: 30px;
		float: left;
		font-size: 30rpx;
		font-weight: bold;
	}

	.feed_type {
		width: 100%;
		height: 50px;
		margin-left: 30rpx;

	}
	.feed_type_item
	{
		float: left;
		height: auto;
		margin: 20rpx 10rpx;
	}
	.select_item {
		background-color: #E4E7ED;
		color: #F0AD4E;
		border: 2rpx solid #F0AD4E;
	}
	.feedtype_item {
		width: auto;
		padding: 10rpx;
		height: 60rpx;
		border-radius:5px;
		font-size: 20rpx;
	}
	.unselect_item {
		border: 2rpx solid #000000;
		color: #000000;
	}
	.feedtextare_panel
	{
		width: 100%;
	}
	.feedarea_text
	{
		width: 95%;
		height: 300rpx;
		margin: 2% 2%;
		background-color: #C0C0C0;
		border-radius: 10rpx;
		text-indent:30rpx;
	}
	.left_text_panel 
	{
		text-align: right;
		color: #555555;
		font-size: 23rpx;
		z-index: 1;
		position: absolute;
		right: 30rpx;
		margin-top:-50rpx ;
		z-index: 2;
	}
	.add_imagepanel
	{
		float: left;
		height: 100rpx;
		width: 100%;
		margin-left: 10%;
		margin-top: 2%;

	}
	.add_btn
	{
		float:left;		
		height:100%;
		width: 100rpx;
	}
	.push_imagepanel
	{
		float: center;
		height: 50rpx;
		width: 600rpx;
		margin-top: 2%;
	}
	.push_btn
	{
		background-color: #00aaff;
	}
	.feed_text
	{
		float: left;
		font-size: 20rpx;
	}
	.feed_record_panel
	{
		
		bottom: 15rpx;
		text-align: left;
		position: absolute;
		height: 30rpx;
;
	}
	.feed_record_btn
	{
		float: left;
		height:20rpx;
		width: 40rpx;
		margin-top: 7rpx;
	}
	.image_list_panel
	{
		float:left;
		margin-left: 30rpx;
	}
	.image_item
	{
		float:left;
		width: 100rpx;
		height: 100rpx;
	}
	.jian_btn
	{
		width: 20rpx;
		height: 20rpx;
	}
</style>
